<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="chart">
    <div id="barChart01" class="bar-chart">
      <div
        v-if="showNoData"
        style="
          width: 100%;
          height: 90%;
          font-size: 1rem;
          color: #999;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        暂无统计数据
      </div>
    </div>
    <div id="pieChart01" class="pie-chart">
      <div
        v-if="showNoData"
        style="
          width: 100%;
          height: 90%;
          font-size: 1rem;
          color: #999;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        暂无统计数据
      </div>
    </div>
  </div>
</template>

<script setup>
import * as VTable from '@visactor/vtable';
import VChart from '@visactor/vchart';

const props = defineProps(['serviceCountData']);
VTable.register.chartModule('vchart', VChart);
const showNoData = ref(true);
const CONTAINER_ID = 'pieChart01';
const CONTAINER_BAR_ID = 'barChart01';

let vchartInstance = null;
let vbarInstance = null;
console.log('props', props.serviceCountData);
watch(
  () => props.serviceCountData,
  (newServiceCountData) => {
    // 销毁旧实例
    if (vchartInstance) {
      vchartInstance.release();
    }
    if (vbarInstance) {
      vbarInstance.release();
    }
    if (newServiceCountData.dataBaseTypeList?.length && newServiceCountData.senarioDataList?.length) {
      // 重新初始化图表
      initBarRadar(newServiceCountData.senarioDataList);
      initRadar(newServiceCountData.dataBaseTypeList);
      showNoData.value = false;
    } else {
      showNoData.value = true;
    }
  },
  { deep: true, immediate: true }
);

onBeforeUnmount(() => {
  vchartInstance?.release();
  vbarInstance?.release();
});

const initBarRadar = (params) => {
  console.log('params', params);
  const chartData = params.flatMap((scenarioData) => {
    return scenarioData.dataBaseDatas.map((data) => ({
      scenario: scenarioData.senarioName, // 场景名称
      dataBaseName: data.dataBaseName, // 数据库名称
      value: data.dataCount // 数据库的数量
    }));
  });
  // 图表配置
  const spec = {
    type: 'bar', // 堆叠柱状图
    data: [
      {
        id: 'barData',
        values: chartData
      }
    ],
    xField: 'scenario', // 横轴字段：场景名称
    yField: 'value', // 纵轴字段：数量
    seriesField: 'dataBaseName', // 堆叠字段：数据库名称
    stack: true,
    label: {
      visible: true,
      position: 'inside'
    },
    legends: {
      visible: true,
      orient: 'top',
      position: 'middle',
      item: {
        label: {
          style: {
            fontSize: 8
          }
        }
      }
    },
    label: {
      visible: true,
      style: {
        fontSize: 8
      },
      layout: {
        overlap: {
          hideOnOverlap: false
        }
      }
    },
    bar: {
      style: {
        fillOpacity: 0.9, // 填充透明度,
        width: 30 // 柱子宽度
      }
    },
    axes: [
      {
        orient: 'bottom',
        paddingInner: 0.3 // 柱子之间的间距
      }
    ]
  };
  const vchart = new VChart(spec, { dom: CONTAINER_BAR_ID });
  vchart.renderSync();
  vbarInstance = vchart;
};
const initRadar = (params) => {
  const spec = {
    type: 'pie',
    title: {
      visible: true
    },
    data: [
      {
        id: 'id02',
        values: params
      }
    ],
    outerRadius: 0.7,
    innerRadius: 0.5,
    padAngle: 0.6,
    valueField: 'dataCount',
    categoryField: 'dataBaseName',
    pie: {
      style: {
        cornerRadius: 10
      },
      state: {
        hover: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1
        },
        selected: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1
        }
      }
    },
    legends: {
      visible: true,
      orient: 'right',
      item: {
        icon: 'circle',
        label: {
          style: {
            fontSize: 8 // 直接设置字体大小（数字类型，单位 px）
          }
        }
      }
    },
    label: {
      visible: true,
      style: {
        fontSize: 8
      },
      layout: {
        overlap: {
          hideOnOverlap: false
        }
      }
    }
  };

  const vchart = new VChart(spec, { dom: CONTAINER_ID });
  vchart.renderSync();
  vchartInstance = vchart;
};
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
  .bar-chart {
    width: 100%;
    height: calc(55% - 10px);
  }
  .pie-chart {
    border-top: 1px solid #cccccc;
    width: 100%;
    height: 45%;
  }
}
</style>
